import React, { useState, useEffect } from 'react'

function App() {
  const [ proList, setProList ] = useState([])

  // 发现代码一直在请求？
  // 状态的改变，覆盖式更新，整个函数重新执行，意味着重新请求
  // useEffect 其实可以相当于 类组件中的
  // componentDidMount componentDidUpdate componentWillUnmount 三个生命周期钩子函数的合体
  useEffect(() => {
    fetch('http://121.89.205.189/api/pro/list').then(res => res.json())
      .then(res => {
        console.log(res.data)
        setProList(res.data)
      })
  })

  return (
    <div>
      {
        proList && proList.map(item => {
          return (
          <div key = { item.proid }>{ item.proname }</div>
          )
        })
      }
    </div>
  )
}

export default App
